未分类

使用Webpack 2来搭建基于React,SASS,ES2015,Babel,Bootstrap的开发框架

webpack, 翻译, 转载

原文链接：使用Webpack 2来搭建基于React,SASS,ES2015,Babel,Bootstrap的开发框架

作者：srinivasan

译者：Scar9k

转载请注明出处。

使用Webpack 2来配置基于React,SASS,ES2015,Babel,Bootstrap的开发环境

1 -8pPP-F3plVmB2xlxET8uA.jpeg

提示：如果想使用Webpack来搭建一个开发框架推荐参考我之前发表的文章
而本文我们将了解如何将其从Webpack v1移植至Webpack v2

Webpack Config
Webpack module.loaders 现在由 module.rules替代

Loaders 仍然可以有效地被使用，但新的命名规则更容易理解。

自动加载-loader模块的拓展名的功能被移除

当我们引用loaders时我们现在不能再省略 -loader 的拓展名了。

关联 loaders

在使用 webpack 1 时，我们使用 ! 来关联它们，但是在 webpack 2 中我们使用 use 来配置一组 loaders

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const {resolve} = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    context: resolve(__dirname, 'src'),
    entry: [
        './scripts/main.js'
        // the entry point of our app
    ],
    output: {
        filename: 'main.js',
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: ['babel-loader',],
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
                        use: [
                            {
                                loader: "css-loader" // translates CSS into CommonJS
                            },
                            {
                                loader: "sass-loader" // compiles Sass to CSS
                            }
                        ],
                        fallback: "style-loader" // used when css not extracted
                    }
                ))
            },
            {
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                use: 'url-loader'
            },
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        // prints more readable module names in the browser console on HMR updates
        new ExtractTextPlugin({filename: 'styles.css', allChunks: true})
    ],
};
css-hot-loader

从css被关联到index文件之后，使用css-hot-loader来重新加载样式的变动。

你可以在github上找到整个搭建完成的react-webpack-kit

如果有什么想法或者观点请反馈给原作者。

分享到